<template>
  <div class="container">

<!--   题目头：题目的ID号 和 题目难度-->
    <template v-if="headerShow">
      <el-row class="header" type="flex">
        <el-col >
          <div class="id"  v-if="idShow"></div>
        </el-col>
        <el-col class="blank">

        </el-col >
        <el-col >
          <div class="difficulty" v-if="difficultyShow"></div>
        </el-col>
      </el-row>
    </template>

<!--    题目信息:序号、题目问题、分数、类型-->
    <template v-if="titleShow">
      <el-row class="title" type="flex">
        <el-col>
          <div class="order" v-if="orderShow"></div>
          <div class="type" v-if="typeShow"></div>
        </el-col>
        <el-col>
          <el-input class="title_input"
                    type="textarea"
                    autosize="true"
                    resize="none"
                    v-if="titleShow">

          </el-input>
        </el-col>
        <el-col>
          <div class="score" v-if="scoreShow"></div>
        </el-col>
      </el-row>
    </template>
<!--    作答区域-->
    <template v-if="answerFieldShow">
      <el-row class="answer_field" type="flex">
        <el-col></el-col>
        <el-col>
          <el-input class="answer_field_input"
                    type="textarea"
                    autosize="true"
                    resize="none"
                    v-if="answerFieldShow">

          </el-input>
        </el-col>
        <el-col></el-col>
      </el-row>

    </template>

<!--    答案区-->
    <template v-if="answerShow">
      <el-row class="answer" type="flex">
        <el-col></el-col>
        <el-col>

        </el-col>
        <el-col></el-col>
      </el-row>
    </template>

<!--    解析区-->
    <template v-if="analysisShow">
      <el-row class="analysis" type="flex">
        <el-col></el-col>
        <el-col>
          <el-input class="answer_field_input"
                    type="textarea"
                    autosize="true"
                    resize="none"
                    v-if="analysisShow">

          </el-input>
        </el-col>
        <el-col></el-col>
      </el-row>
    </template>

  </div>
</template>

<script>
export default {
  name: "Question",
  props: {
    //是否显示题目的ID
    showID:{
      type:Boolean,
      default:function(){
        return true
      },
    },
    //是否显示题目的题目
    showTitle:{
      type:Boolean,
      default:function(){
        return true
      },
    },
    //是否显示题目的类型
    showType:{
      type:Boolean,
      default:function(){
        return true
      },
    },
    //是否显示答案
    showAnswer:{
      type:Boolean,
      default:function(){
        return true
      },
    },
    //是否显示解析
    showAnalysis:{
      type:Boolean,
      default:function(){
        return true
      },
    },
    //是否显示难度
    showDifficulty:{
      type:Boolean,
      default:function(){
        return true
      },
    },
    //是否显示分数
    showScore:{
      type:Boolean,
      default:function(){
        return true
      },
    },
    //题目的顺序
    order:{
      type:Number,
      default: function () {
        return -1
      }
    },
    //是否为考试模式
    isExam:{
      type:Boolean,
      default:function(){
        return false
      },
    },
    //传入的json示例值
  //


  },
  computed:{
    idShow:function (){
      return this.showID;

    },
    headerShow:function(){
      return this.showID || this.showDifficulty;
    },
    difficultyShow:function (){
      return this.showDifficulty;

    },
    orderShow:function(){
      if(this.order<1) return false;
      else return true;
    },
    typeShow:function(){
      return this.showType;
    },
    titleShow:function(){
      return this.titleShow;
    },
    scoreShow:function(){
      return this.showScore
    },
    answerFieldShow:function(){
      return this.isExam;
    },
    answerShow:function (){
        return this.isExam&&this.showAnswer;
    },
    analysisShow:function (){
      return this.isExam&&this.showAnalysis;

    },
  },
  data() {
    return{

    }
  },
  methods:{

  }
}
</script>

<style scoped lang="less">
.container{
  border:1px solid #000000;
}


</style>